<template>
  <div class="drawer1">
    <el-drawer v-model="drawer"   :show-close="false" size="40%" :before-close="close">
      <template #header>
        <div>
          <div style="display: flex;justify-content: space-between;align-items: center">
            <h3>
              工商信息查询
            </h3>
            <div style="cursor: pointer;font-size: 16px" @click="close">
              <el-icon><CloseBold /></el-icon>
            </div>
          </div>
          <div class="drawer5">
            <div style=" width: 80px" class="drawerFont3">
              企业名称
            </div>
            <el-autocomplete
              style="width: 100%"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入企业名称"
              v-model="state"
              clearable
              @select="handleSelect"
            >
              <template #append>
                <el-button type="primary" :icon="Search"  @click="queryInformation"/>
              </template>
            </el-autocomplete>
          </div>
        </div>
      </template>
      <template #default>
        <div class="drawer6">
<!--        <div >
          <div class="drawerFont3">
            经营情况
          </div>
          <div class="drawer4">
            <div class="drawerFont3 drawer7" v-for="(items,index) in operateList" :key="index">
              <div>
                {{items.name}}
              </div>
              <div style="margin-left: 10px">
                 {{items.label}}
              </div>
            </div>
          </div>
        </div>-->
        <div v-if="getInformation">
          <div class="drawerFont3">
            工商信息
          </div>
          <div class="drawer8">
            <div class="drawer2">
              <div class="drawerFont2">
                注：勾选信息可回填至客户页面
              </div>
              <div class="drawerFont1" @click="backFill(businessInformation)">
                回填企业信息
              </div>
            </div>
            <div v-for="(items,index) in businessInformation" class="drawer9">
             <div style="width: 20px">
               <el-checkbox v-if="items.type !=4" v-model="items.type" />
             </div>
              <div style="width: 130px;color: #9199a6">
                {{items.name}}
              </div>
              <div style="margin-left: 10px;color: #000; width: calc(100% - 150px)">
                {{items.label}}
              </div>
            </div>
          </div>
        </div>
          <el-empty v-else-if="getInformation == undefined" description="加载....." v-loading="true" />
          <el-empty v-else description="查询为空" />
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ref } from "vue";
import * as _ from 'lodash'
import { customerBusinessInfo } from "/@/api/dms/customer";
import customerStore from "/@/views/customerIndex/storeList";
const drawer = ref(false)
const name = ref('')
// 查询框
const links = ref<any>([])
const state = ref('')
const getInformation = ref<any>(undefined)
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  const results = links.value
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: any) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}

const handleSelect = (item: Record<string, any>) => {
  state.value = item.value
}
const operateList = ref([
  {name:'上市公司',label:'否'},
  {name:'经营异常',label:'0'},
  {name:'股东信息',label:'4'},
  {name:'人员信息',label:'5'},
  {name:'分支信息',label:'0'},
  {name:'变更信息',label:'56'},
])
const businessInformation = ref([
  {name:'企业名称',label:'',type:true,field:'companyName',},
  {name:'社会统一信用代码',label:'',type:true,field:'socialCreditCode',},
  {name:'纳税人识别号',label:'',type:4},
  {name:'企业类型',label:'',type:4},
  {name:'法定代表人',label:'',type:4},
  {name:'注册资本',label:'',type:4},
  {name:'成立日期',label:'',type:4},
  {name:'经营状态',label:'',type:4},
  {name:'注册地址',label:'',type:4},
  {name:'工商信息号',label:'',type:4},
  {name:'登记机关',label:'',type:4},
  {name:'经营范围',label:'',type:4},
])
const pintStoreList = customerStore()
// 查询
const queryInformation = _.debounce(()=>{
  businessInformationApi(state.value)
},500)
// 回填事件
const backFill = (value:any)=>{
  drawer.value = false
  pintStoreList.setBusinessInformationDate(value.filter((items:any)=> items.type == true))
  getInformation.value = undefined
}
// 关闭抽屉
const close = ()=>{
  drawer.value = false
  getInformation.value = undefined
}

// 查询接口
const  businessInformationApi =  (value:any)=>{
  getInformation.value = undefined
  customerBusinessInfo({company_name:value}).then((data:any)=>{
    if(data.code == 200){
      links.value = data.data.map((item:any)=>{
        return{value:item.companyName}
      })
      if( data.data.length === 1){
        getInformation.value = true
        businessInformation.value[0].label = data.data[0].companyName
        businessInformation.value[1].label = data.data[0].socialCreditCode
        businessInformation.value[2].label = data.data[0].taxCode
        businessInformation.value[3].label = data.data[0].companyType
        businessInformation.value[4].label = data.data[0].legalPerson
        businessInformation.value[5].label = data.data[0].paidInMoney
        businessInformation.value[6].label = data.data[0].establishDate
        businessInformation.value[7].label = data.data[0].state
        businessInformation.value[8].label = data.data[0].companyAddress
        businessInformation.value[9].label = data.data[0].registerCode
        businessInformation.value[10].label = data.data[0].registerOrganization
        businessInformation.value[11].label = data.data[0].businessScope
      }else {
        getInformation.value = false
      }
    }
  })
}
//监听
watch(drawer,()=>{
  if(drawer.value== true){
    state.value = name.value
    businessInformationApi(name.value)
  }
})
defineExpose(
  {
    drawer,
    name,
  }
)
</script>

<style lang="scss" scoped>
.drawer1{
  :deep(){
    .el-drawer__header{
      margin-bottom: 0px;
    }
    .el-input-group__append{
      width: 60px;
      height: 100%;
      background-color: #276ff5;
      box-shadow:none;
    }
    .el-drawer__body{
      background-color: #eff0f3;
      padding: 0px;
    }
  }
}
.drawer2{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.drawer3{
 margin-top: 20px;
  margin-bottom: 20px;
}
.drawer4{
  margin-top: 10px;
 margin-bottom: 10px;
  background-color: #fff;
  padding: 20px;
  height: 150px;
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.drawer5{
  display: flex;align-items: center;background: #fff;width: 100%;height: 50px;padding-right: 10px;
  :deep(){
    .el-icon{
      color: #fff;
    }
  }

}
.drawer6{
  padding: 20px;
}
.drawer7{
  display: flex;
  align-items: center;
  flex: 50%;
}
.drawer8{
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  padding: 20px;
  min-height: 150px;
  border-radius: 5px;
}
.drawer9{
  display: flex;
  align-items: center;
  flex: 100%;
  margin-bottom: 15px;
}
.drawerFont1{
  color: #4381f5;
  cursor:pointer;
}
.drawerFont2{
  color:#989898;
}
.drawerFont3{
 color: #000000;
  font-size: 14px;
}
</style>

